<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html {
                background-color: rgb(54, 97, 233);

        }
        
        div:first-child {
            background-color: rgb(54, 97, 233);
            text-align: center;
        }
        
        .program {
            background-color: rgb(25, 25, 25);

        }

        .number1 {
            color: gray;
            text-indent: 10px;
            
        }

        .number2 {
            color: gray;
            text-indent: 4px;
        }

        .content-common {
            color:rgb(70, 107, 230)
        }

    </style>
</head>
<body>
    <div>
        <h1 style="color: rgb(142, 236, 159)">网页开发基础课程标签汇总</h1>
    </div>
    <div class="program">
        <table>
            <tr>
                <td class="number1">1</td>
                <td class="content-common"><</td>
                <td class="content-common" onmouseover="overShow()" onmouseout="outHide()">!DOCTYPE html</td>  
                <div id="showDiv" style="position: absolute; background-color: rgb(211, 203, 203); border: 10px solid black; border-radius: 5px;"></div>
                <td class="content-common">></td>
            </tr>
            <tr>
                <td class="number1">2</td>
            </tr>
            <tr>
                <td class="number1">3</td>
            </tr>
            <tr>
                <td class="number1">4</td>
            </tr>
            <tr>
                <td class="number1">5</td>
            </tr>
            <tr>
                <td class="number1">6</td>
            </tr>
            <tr>
                <td class="number1">7</td>
            </tr>
            <tr>
                <td class="number1">8</td>
            </tr>
            <tr>
                <td class="number1">9</td>
            </tr>
            <tr>
                <td class="number2">10</td>
            </tr>
            <tr>
                <td class="number2">11</td>
            </tr>
            <tr>
                <td class="number2">12</td>
            </tr>
            <tr>
                <td class="number2">13</td>
            </tr>
        </table>
    </div>

    <script>
        function overShow() {
         var showDiv = document.getElementById('showDiv');
         showDiv.style.left = event.clientX;
         showDiv.style.top = event.clientY;
         showDiv.style.display = 'block';
         showDiv.innerHTML = '声明帮助浏览器正确地显示网页';
        }
        
        function outHide() {
         var showDiv = document.getElementById('showDiv');
         showDiv.style.display = 'none';
         showDiv.innerHTML = '';
        }
       </script>




</body>
</html>